<template>
  <view class="box">
    <view class="hd">
      <view class="left" v-if="detail.user" @click="goUser(detail.user)">
        <view class="avatar">
          <image :src="setUrl(detail.user.avatar)" class="img"></image>
          <image src="../../../static/vip.png" class="vip"></image>
        </view>
        <view class="fo">
          <view class="name">{{ detail.user.nickname }}<!-- <text class="side">财经博主</text> --></view>
          <view class="time">{{ timeFormat(detail.createtime, 'yyyy-mm-dd hh:MM') }} | 阅读人数：{{ detail.views }}</view>
        </view>
      </view>
      <view class="right">
        <template v-if="detail.is_my != 1">
          <view @click="followUser(detail)">
            <view class="setMarrow fish" v-if="detail.is_follow">已关注</view>
            <view class="setMarrow " v-else>关注</view>
          </view>
        </template>
      </view>
    </view>
    <view class="topic" v-if="detail.tag && detail.tag.length">
      <view class="test" v-for="(item, idx) in detail.tag" :key="idx">#{{ item.name }}</view>
    </view>
    <view class="content" :class="{ line3: isBuy }">{{ detail.content }}</view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import { post } from '@/api';
import { setUrl } from '@/common';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';

const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  },
})
const isBuy = computed(() => { // 收费且未购买
  return props.detail.is_charge == 2 && props.detail.is_buy == 0;
})

// 关注
function followUser(row){
  const params = {
    follow_user_id: props.detail.user.id,
    way: row.is_follow == 1 ? 2 : 1
  }
  post('api/user_follow/followUser', params).then(res => {
    if(res.code == 1){
      row.is_follow = row.is_follow == 1 ? 0 : 1;
    }
  })
}
function goUser(row){
  uni.navigateTo({
    url: `/pages/mine/official/index?id=${row.id}`
  });
}
</script>

<style lang="scss" scoped>
  .content{
    font-weight: 400;
    font-size: 30rpx;
    color: #2B2B2B;
    margin-bottom: 24rpx;
    white-space: pre-line;
    &.line3{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
  .topic{
    width: 100%;
    padding-bottom: 8rpx;
    display: flex;
    flex-wrap: wrap;
    .test{
      font-weight: 400;
      font-size: 30rpx;
      color: #465B89;
      margin-right: 20rpx;
    }
  }
  .hd{
    width: 100%;
    padding-bottom: 26rpx;
    padding-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
      .fo{
        padding-left: 20rpx;
        .desc{
          font-weight: 400;
          font-size: 22rpx;
          color: #999999;
        }
        .time{
          font-weight: 400;
          font-size: 22rpx;
          color: #999999;
        }
        .name{
          font-weight: 500;
          font-size: 32rpx;
          color: #2B2B2B;
          display: flex;
          align-items: center;
          .side{
            font-weight: 400;
            font-size: 20rpx;
            color: #999999;
            height: 32rpx;
            line-height: 32rpx;
            padding: 0 12rpx;
            border-radius: 32rpx;
            border: 1rpx solid #B8B8B8;
            margin-left: 8rpx;
          }
        }
      }
      .avatar{
        width: 70rpx;
        height: 70rpx;
        position: relative;
        .img{
          border-radius: 50%;
          overflow: hidden;
        }
        .vip{
          position: absolute;
          right: 0;
          bottom: 0;
          width: 28rpx;
          height: 28rpx;
        }
      }
    }
    .right{
      display: flex;
      align-items: center;
      .setMarrow{
        width: 124rpx;
        height: 44rpx;
        background: #FFFFFF;
        border: 1rpx solid #E43222;
        border-radius: 44rpx;
        line-height: 44rpx;
        text-align: center;
        font-weight: 400;
        font-size: 24rpx;
        color: #E43222;
        box-sizing: content-box;
        &.fish{
          color: #999999;
          border-color: #999999;
        }
      }
    }
  }
  .box{
    padding: 0 30rpx;
  }
</style>